/**
 * 类组件中定义 state 的两种方式：
 *    1. 构造函数中
 *    2. public class fields 语法   【推荐】
 *
 * 正确更新 state
 *    1. 不要直接修改 State
 *    2. State 更新会被合并
 *
 */

import React from "react";

interface IProps {}

interface IState {
  name: string;
  age: number;
  count: number;
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);

    // 初始化 state 的操作
    this.state = {
      name: "张三",
      age: 18,
      count: 1,
    };
  }

  // state = {
  //   name: "张三",
  //   age: 18,
  // };

  render() {
    console.log("App Render");
    return (
      <div>
        <h1>App</h1>
        <button>
          {this.state.name} {this.state.age}
        </button>

        <hr />
        <button
          onClick={() => {
            // 直接修改，将不起作用。。。【PS: 但是可以调用强制更新API来生效，不建议】
            // this.state.count++;
            // this.forceUpdate();
            // =====
            // 多次修改
            this.setState((state) => {
              console.log("state 1", state.count); // 1
              return { count: state.count + 1 };
            });
            this.setState((state) => {
              console.log("state 2", state.count); // 2
              return { count: state.count + 1 };
            });
            this.setState((state) => {
              console.log("state 3", state.count); // 3
              return { count: state.count + 1 };
            });

            console.log("===", this.state.count); // 上次的值
          }}
        >
          count {this.state.count}
        </button>
        <hr />
        <button
          onClick={() => {
            console.log("点击了");

            // 对象写法
            // this.setState({ count: this.state.count + 1 }, () => {
            //   console.log("callback", this.state.count); // 最新的值
            // });

            // console.log(this.state.count); // 上次的值

            // 函数写法
            this.setState(
              (state, props) => {
                return {
                  count: state.count + 1,
                };
              },
              () => {
                console.log("callback", this.state.count); // 最新的值
              }
            );
            console.log(this.state.count); // 上次的值
          }}
        >
          {this.state.count}
        </button>
      </div>
    );
  }
}

export default App;
